{/* Laptop lid (silver) */}

{/* Inner bezel (black) */}

{/* Camera dot */}

{/* Screen area */}

{children}

{/* Hinge shadow */}

{/* Laptop base (silver, wider than lid) */}

{/* Trackpad notch */}

); } // ── Cursor ────────────────────────────────────────────────────────────────── function Cursor({ x, y, clicking = false }) { return (

); } // ── Browser chrome ────────────────────────────────────────────────────────── function BrowserFrame({ extensionHighlight = 0, extensionPulse = 0 }) { return (

{/* Top bar */}

mail.google.com/mail/u/0/#drafts

0 ? 'rgba(88,135,242,0.10)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background 120ms', }}> {extensionPulse > 0 && (

)}

{/* Body: floating compose window on neutral bg */}

{/* Compose window — floating, like a mini draft */}

{/* Compose title bar */}

New Message

—▢×

{/* To */}

To wanda@visionindustries.com

{/* Subject */}

Demo Follow-Up

{/* Body */}

Hi Wanda,

Thanks again for taking the time to connect & review a demo today. Here are the resources you requested:

Customer Case Studies
G2 Reviews

Here’s a quick way to grab time with our team next week for a scoping session.

Looking forward to our next conversation!

Best,
Tony

{/* Footer */}

Send

A📎🔗😀

); } // ── Extension popup, populated with fake content ─────────────────────────── function ExtensionPopup({ progress, createPulse = 0 }) { const eased = Easing.easeOutCubic(clamp(progress, 0, 1)); const y = -16 + eased * 16; return (

{/* Header */}

BookIt

{/* Create Invite card */}

New Invite

Pick times from your team’s calendars and invite guests to book a meeting.

0 ? 1 - createPulse * 0.04 : 1})`, transition: 'transform 80ms', }}> Create Invite {createPulse > 0 && (

)}

{/* My Links */}

My Links

Copy a booking link below or create a new one.

{[ { title: 'Product Demo', dur: '30 min', people: 'Tony Stark, Steve Rogers +4' }, { title: 'Implementation Kickoff', dur: '1 hour', people: 'Larry Odinson' }, { title: 'Qualification Call', dur: '30 min', people: 'Natasha Romanoff, Nick Fury' }, { title: 'Demo Follow-Up', dur: '15 min', people: 'Tony Stark, Steve Rogers' }, ].map((row, i, arr) => (

{row.title}

{row.dur}

{row.people}

Copy

))}

); } // ── Calendar modal ───────────────────────────────────────────────────────── function CalendarModal({ progress }) { const eased = Easing.easeOutCubic(clamp(progress, 0, 1)); const scale = 0.94 + eased * 0.06; const panelW = 940; const panelH = 560; return (

{/* Left column */}

Hosts (4)

{[ { initials: 'TS', name: 'Tony Stark', color: 'oklch(80% 0.08 30)' }, { initials: 'SC', name: 'Sana Chan', color: 'oklch(82% 0.07 290)' }, { initials: 'ZF', name: 'Zara Flemmings', color: 'oklch(82% 0.07 210)' }, { initials: 'VP', name: 'Vanessa Peters', color: 'oklch(82% 0.07 340)' }, ].map((p, i) => (

{p.initials}

{p.name}

))}

Add Hosts

Specific User

Find a User

Select a Meeting Type

Meeting Type Owner

Tony Stark

Meeting Type

BookIt – 30 Min Demo

{/* Right column */}

Select Date and Time

Timezone: Pacific US ▾

Today

‹ ›

October 5 – 11, 2025

▾ Meeting Times (2)

{/* close X */}

); } function CalendarGrid() { const days = ['SUN','MON','TUE','WED','THU','FRI','SAT']; const dayNums = [5,6,7,8,9,10,11]; const hours = 6; const cellH = 52; const labelW = 44; const events = [ { day: 3, startH: 0, dur: 1, color: 'oklch(92% 0.05 85)', label: 'busy', time: '10:30 AM', accent: 'oklch(75% 0.10 85)' }, { day: 4, startH: 0, dur: 1, color: 'oklch(92% 0.05 290)', label: 'Demo Call', time: '10:30 AM', accent: 'oklch(75% 0.10 290)' }, { day: 5, startH: 0, dur: 1, color: 'oklch(92% 0.05 85)', label: 'busy', time: '10:30 AM', accent: 'oklch(75% 0.10 85)' }, { day: 2, startH: 1, dur: 1, color: 'oklch(92% 0.05 255)', label: 'Weekly Sync', time: '12:00 PM', accent: 'oklch(72% 0.10 255)' }, { day: 3, startH: 1, dur: 1, color: 'oklch(92% 0.05 255)', label: 'Team Chat', time: '12:00 PM', accent: 'oklch(72% 0.10 255)' }, { day: 4, startH: 1, dur: 1, color: 'oklch(92% 0.05 255)', label: 'Weekly Scrum', time: '12:00 PM', accent: 'oklch(72% 0.10 255)' }, { day: 3, startH: 1.5, dur: 1, color: 'oklch(92% 0.05 85)', label: 'busy', time: '12:30 PM', accent: 'oklch(75% 0.10 85)' }, { day: 2, startH: 2, dur: 1, color: 'oklch(92% 0.05 30)', label: 'One-on-one', time: '1:00 PM', accent: 'oklch(75% 0.10 30)' }, { day: 5, startH: 2, dur: 1, color: 'oklch(92% 0.05 30)', label: 'Training', time: '1:00 PM', accent: 'oklch(75% 0.10 30)' }, { day: 1, startH: 3, dur: 1, color: 'oklch(92% 0.05 85)', label: 'busy', time: '2:00 PM', accent: 'oklch(75% 0.10 85)' }, { day: 3, startH: 3, dur: 1, color: 'oklch(92% 0.05 85)', label: 'busy', time: '2:00 PM', accent: 'oklch(75% 0.10 85)' }, ]; // Selected slots (always on — modal appears after selection visually) const selected = [ { day: 1, startH: 1.0 }, // Mon 12:00 - but actually we'll show 11:30 style { day: 2, startH: 3.0 }, // Tue 2:00 ]; return (

{Array.from({length: hours}).map((_, i) => { const h = 11 + i; const display = h > 12 ? (h - 12) : h; const suffix = h >= 12 ? 'PM' : 'AM'; return (

{display} {suffix}

); })}

{days.map((d, di) => { const isWeekend = di === 0 || di === 6; return (

{d}

{dayNums[di]}

{Array.from({length: hours}).map((_, hi) => (

))} {events.filter(e => e.day === di).map((e, ei) => (

{e.label}

{e.time}

))} {selected.filter(s => s.day === di).map((s, si) => (

{s.startH === 1.0 ? '11:30 AM' : '2:00 PM'}

))}

); })}

); } // ── Scene orchestration ───────────────────────────────────────────────────── function Scene() { const time = useTime(); // Timeline: // 0.0 - 1.2 cursor → extension icon // 1.2 click extension // 1.3 - 2.1 popup drops in // 2.1 - 3.6 HOLD popup // 3.6 - 4.2 cursor → Create Invite button // 4.2 click Create Invite // 4.3 - 5.1 popup fades, modal scales in // 5.1 - 8.8 HOLD modal // 8.8 - 9.5 modal fades, reset for loop const cursorPath = [ { t: 0.0, x: 500, y: 440 }, { t: 1.15, x: 1190, y: 28 }, // extension icon { t: 1.4, x: 1190, y: 28 }, { t: 2.2, x: 1110, y: 170 }, { t: 3.6, x: 1110, y: 200 }, { t: 4.1, x: 1080, y: 244 }, // Create Invite button { t: 4.35, x: 1080, y: 244 }, { t: 5.4, x: 840, y: 420 }, // drift over modal { t: 8.8, x: 840, y: 420 }, { t: 9.5, x: 520, y: 480 }, ]; const interp = (axis) => { for (let i = 0; i < cursorPath.length - 1; i++) { const a = cursorPath[i], b = cursorPath[i+1]; if (time >= a.t && time <= b.t) { const span = b.t - a.t; const local = span > 0 ? (time - a.t) / span : 0; const eased = Easing.easeInOutCubic(local); return a[axis] + (b[axis] - a[axis]) * eased; } } return cursorPath[cursorPath.length-1][axis]; }; const cursorX = interp('x'); const cursorY = interp('y'); // Click pulse const clickPulse = (tc) => { const d = time - tc; if (d < 0 || d > 0.4) return 0; return 1 - d / 0.4; }; const extPulse = clickPulse(1.2); const clicking = extPulse > 0.5; const createPulse = clickPulse(4.2); const clicking2 = extPulse > 0.5 || createPulse > 0.5; const extHoverHi = animate({ from: 0, to: 1, start: 0.8, end: 1.2 })(time); const popupShow = animate({ from: 0, to: 1, start: 1.3, end: 2.1, ease: Easing.easeOutCubic })(time); const popupFade = 1 - animate({ from: 0, to: 1, start: 4.35, end: 4.85 })(time); const popupVisible = popupShow * popupFade; const modalShow = animate({ from: 0, to: 1, start: 4.5, end: 5.2, ease: Easing.easeOutCubic })(time); const modalFade = 1 - animate({ from: 0, to: 1, start: 8.9, end: 9.4 })(time); const modalVisible = modalShow * modalFade; return ( <> {popupVisible > 0.01 && (

)} {modalVisible > 0.01 && (

)} ); } // ── App ───────────────────────────────────────────────────────────────────── function App() { const params = new URLSearchParams(window.location.search); const clean = params.get('clean') === '1'; if (clean) { return ( ); } return ( ); } function CleanStage({ width, height, duration, children }) { const [time, setTime] = React.useState(0); React.useEffect(() => { let raf; let last = null; const step = (ts) => { if (last == null) last = ts; const dt = (ts - last) / 1000; last = ts; setTime(t => (t + dt) % duration); raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [duration]); const ctxValue = { time, duration, playing: true, setTime, setPlaying: () => {} }; return (

{children}

); } ReactDOM.createRoot(document.getElementById('root')).render();